<template>
  <div class="el_point_box w100 flex-x flex-top">
    <el-tabs
      tabPosition="left"
      class="customer-tab"
      @tab-click="jump"
      :value="value"
    >
      <el-tab-pane
        v-for="(tab, index) in tabs"
        :name="tab.refName"
        :key="index"
        :label="tab.name"
      ></el-tab-pane>
    </el-tabs>
    <div
      v-init-screen-h="120"
      class="scroll-content"
      @scroll="onScroll"
      :style="{
        width: '100%',
        padding: '0 10px'
      }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    tabs: {
      type: Array,
      default: () => []
    }
  },
  components: {},
  data() {
    return {
      tabIndex: "0",
      contentStyleObj: {
        height: "100px"
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getHight();
    window.addEventListener("resize", this.getHight);
  },
  destroyed() {
    window.removeEventListener("resize", this.getHight);
  },
  methods: {
    jump(tab, event) {
      let target = document.querySelector(".scroll-content");
      let scrollItems = document.querySelectorAll(".scroll-item");
      // 判断滚动条是否滚动到底部
      if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
        this.tabIndex = tab.index.toString();
      }
      let totalY = scrollItems[tab.index].offsetTop - scrollItems[0].offsetTop; // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)
      let distance = document.querySelector(".scroll-content").scrollTop; // 滚动条距离滚动区域顶部的距离
      // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)
      // 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次
      // 计算每一小段的距离
      let step = totalY / 50;
      if (totalY > distance) {
        smoothDown(document.querySelector(".scroll-content"));
      } else {
        let newTotal = distance - totalY;
        step = newTotal / 50;
        smoothUp(document.querySelector(".scroll-content"));
      }

      // 参数element为滚动区域
      function smoothDown(element) {
        if (distance < totalY) {
          distance += step;
          element.scrollTop = distance;
          setTimeout(smoothDown.bind(this, element), 1);
        } else {
          element.scrollTop = totalY;
        }
      }

      // 参数element为滚动区域
      function smoothUp(element) {
        if (distance > totalY) {
          distance -= step;
          element.scrollTop = distance;
          setTimeout(smoothUp.bind(this, element), 1);
        } else {
          element.scrollTop = totalY;
        }
      }
    },
    // 滚动条滚动
    onScroll(e) {
      if (this.tabs.length === 1) {
        return;
      }
      let scrollItems = document.querySelectorAll(".scroll-item");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop - 400;
        // 此处有bug
        // 判断是否已经到达顶部,到顶部给第一个赋值
        if (e.target.scrollTop === 0) {
          this.$emit("input", this.tabs[0].refName);
          break;
        }
        if (judge) {
          this.tabIndex = i.toString();
          // 找对应的tab-name值
          if (this.tabs[this.tabIndex]) {
            this.$emit("input", this.tabs[this.tabIndex].refName);
          }
          break;
        }
      }
    },
    getHight() {
      this.contentStyleObj.height = window.innerHeight - 190 + "px";
    }
  }
};
</script>

<style lang="scss" scoped>
.el_point_box {
}
/deep/ .customer-tab {
  // width: 20%;
  height: 100%;
  // padding: 4px;
  padding-right: 10px;
}
/deep/ .el-tabs--card > .el-tabs__header {
  border-bottom: none;
  margin: 0;
  .el-tabs__nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    border: none;
    .el-tabs__item {
      width: 25%;
      text-align: center;
      border: none;
    }
    .is-active {
      border-radius: 4px;
      color: #fff;
    }
  }
}
</style>
